<template>
  <el-dialog title="网店信息" center :visible.sync="visible" top="200px" width="900px" custom-class="right-aligned-dialog">
    <div >
      <el-row :gutter="15">
        <el-form ref="elForm" :model="dataForm" size="medium" label-width="100px" style="width: 100%">
          <el-col :span="24">
            <el-form-item label-width="110px" label="网店分类" prop="type">
              <el-radio-group v-model="dataForm.type" size="medium" :disabled = "dataForm.disabledType">
                <el-radio
                  v-for="dict in dict.type.trading_type_options"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="110px" label="网店旺旺" prop="wangwangNum">
              <el-input v-model="dataForm.wangwangNum" placeholder="请输入网店旺旺" clearable :style="{width: '100%'}" :disabled = "dataForm.disabledType">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="110px" label="网店链接" prop="link">
              <el-input v-model="dataForm.link" placeholder="请输入网店链接" clearable :style="{width: '100%'}" :disabled = "dataForm.disabledType">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="110px" label="卖家到手价格" prop="handPrice">
              <el-input v-model="dataForm.handPrice" placeholder="请输入卖家到手价格" clearable :style="{width: '100%'}" :disabled = "dataForm.disabledType">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="110px" label="网店出售价格" prop="sellingPrice">
              <el-input v-model="dataForm.sellingPrice" placeholder="请输入网店出售价格" clearable
                :style="{width: '100%'}" :disabled = "dataForm.disabledType">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="110px" label="历史假冒扣分" prop="counterfeitYear">
              <el-input v-model="dataForm.counterfeitYear" placeholder="请输入" clearable :style="{width: '100%'}" :disabled = "dataForm.disabledType">
                <template slot="append">年</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="1px" label="" prop="counterfeitScore">
              <el-input v-model="dataForm.counterfeitScore" placeholder="请输入" clearable
                :style="{width: '100%'}" :disabled = "dataForm.disabledType">
                <template slot="append">分</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label-width="110px" label="网店信誉等级" prop="reputationLevel">
              <el-select v-model="dataForm.reputationLevel" placeholder="请选择网店信誉等级" clearable
                :style="{width: '100%'}" :disabled = "dataForm.disabledType">
                <el-option v-for="dict in dict.type.trading_reputation_level"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label-width="110px" label="主营类目" prop="mainCategory">
              <el-select v-model="dataForm.mainCategory" placeholder="请选择主营类目" clearable
                :style="{width: '100%'}" :disabled = "dataForm.disabledType">
                <el-option v-for="dict in dict.type.trading_main_category"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label-width="110px" label="创店时间" prop="establishmentTime">
              <el-select v-model="dataForm.establishmentTime" placeholder="请选择创店时间" clearable
                :style="{width: '100%'}" :disabled = "dataForm.disabledType">
                <el-option v-for="(item, index) in establishmentTimeOptions" :key="index" :label="item.label"
                  :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="110px" label="网店名称" prop="shopName">
              <el-input v-model="dataForm.shopName" placeholder="请输入网店名称" clearable :style="{width: '100%'}" :disabled = "dataForm.disabledType">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="110px" label="网店详情" prop="shopDetails">
              <el-input v-model="dataForm.shopDetails" type="textarea" placeholder="请输入网店详情"
                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}" :disabled = "dataForm.disabledType"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="110px" label="手机号" prop="mobile">
              <el-input v-model="dataForm.mobile" placeholder="请输入手机号" :maxlength="11" show-word-limit clearable
                prefix-icon='el-icon-mobile-phone' :style="{width: '100%'}" :disabled = "dataForm.disabledType"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="110px" label="QQ号" prop="qqNum">
              <el-input v-model="dataForm.qqNum" placeholder="请输入QQ号" clearable :style="{width: '100%'}" :disabled = "dataForm.disabledType">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="110px" label="网店地址" prop="shopAddress">
              <el-select v-model="dataForm.shopAddress" placeholder="请选择网店地址" clearable
                :style="{width: '100%'}" :disabled = "dataForm.disabledType">
                <el-option v-for="dict in dict.type.s_province"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="110px" label="店铺标签" prop="shopLabel">
              <el-input v-model="dataForm.shopLabel" placeholder="请输入店铺标签" clearable :style="{width: '100%'}" :disabled = "dataForm.disabledType">
                <template slot="append">以【空格】分隔</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="110px" label="淘信誉" prop="taobaoReputation">
              <el-input v-model="dataForm.taobaoReputation" placeholder="请输入淘信誉" clearable
                :style="{width: '100%'}" :disabled = "dataForm.disabledType"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="110px" label="出售人姓名" prop="sellerName">
              <el-input v-model="dataForm.sellerName" placeholder="请输入出售人姓名" clearable :style="{width: '100%'}" :disabled = "dataForm.disabledType">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label-width="110px" label="所在区域" prop="localArea">
              <el-select v-model="dataForm.localArea" placeholder="请选择所在区域" clearable :style="{width: '100%'}" :disabled = "dataForm.disabledType">
                <el-option v-for="dict in dict.type.s_province"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label-width="110px" label="经营状态" prop="operatingState">
              <el-select v-model="dataForm.operatingState" placeholder="请选择经营状态" clearable
                :style="{width: '100%'}" :disabled = "dataForm.disabledType">
                <el-option v-for="dict in dict.type.trading_operating_state"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label-width="110px" label="店铺来源" prop="shopSource">
              <el-select v-model="dataForm.shopSource" placeholder="请选择店铺来源" clearable :style="{width: '100%'}" :disabled = "dataForm.disabledType">
                <el-option v-for="dict in dict.type.trading_shop_source"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label-width="110px" label="好评率" prop="favorableRate">
              <el-input v-model="dataForm.favorableRate" placeholder="请输入好评率" clearable
                :style="{width: '100%'}" :disabled = "dataForm.disabledType">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
<!--
<el-col :span="13">
            <el-form-item label-width="110px" label="店铺类型" prop="shopType">
              <el-select v-model="dataForm.shopType" placeholder="请选择店铺类型" clearable :style="{width: '100%'}" :disabled = "dataForm.disabledType">
                <el-option v-for="(item, index) in shopTypeOptions" :key="index" :label="item.label"
                  :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label-width="110px" label="是否过户" prop="transferOrNot">
              <el-radio-group v-model="formData.transferOrNot" size="medium">
                <el-radio
                  v-for="dict in dict.type.sys_yes_no"
                  :key="dict.value"
                  :label="dict.value"
                  :disabled = "dataForm.disabledType"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="110px" label="是否有差价" prop="priceDifference">
              <el-radio-group v-model="dataForm.priceDifference" size="medium">
                <el-radio
                  v-for="dict in dict.type.sys_yes_no"
                  :key="dict.value"
                  :label="dict.value"
                  :disabled = "dataForm.disabledType"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label-width="110px" label="优惠金额" prop="discountAmount">
              <el-input v-model="dataForm.discountAmount" placeholder="请输入优惠金额" clearable
                :style="{width: '100%'}" :disabled = "dataForm.disabledType">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>-->
          <el-col :span="13">
            <el-form-item label-width="110px" label="网店图片" prop="shopPicture" required>
              <!-- 已上传的图片列表 -->
<!--              <div v-for="(imageUrl, index) in dataForm.shopPicture" :key="index">
                <el-image
                  style="width: 100px; height: 100px; margin-right: 10px;"
                  :src="imageUrl"
                  fit="fill"
                ></el-image>
              </div>-->
              <ShopImageUpload :fileList="dataForm.shopPicture" :hideUpload=dataForm.disabledType @input="shopPictureChange"></ShopImageUpload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm" v-if="!dataForm.disabledType">保存</el-button>
              <el-button @click="visible = false" v-else>确定</el-button>
              <el-button @click="visible = false">取 消</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    </el-dialog>
</template>

<script>
import {addTrading, updateTrading} from "@/views/shop/api/trading";
import {getToken} from "@/utils/auth";
import ShopImageUpload from "@/views/shop/components/ShopImageUpload/index.vue";
import ImageUpload from "@/components/ImageUpload/index.vue";

export default {
  dicts: ['sys_yes_no', 'trading_type_options', 'trading_shop_source', 'trading_main_category', 'trading_shop_address',
    'trading_operating_state', 'trading_reputation_level', 's_province'],
  components: {ShopImageUpload, ImageUpload},
  props: [
    'dataForm'
  ],
  data() {
    function getYearsArray() {
      // 获取当前年份
      const currentYear = new Date().getFullYear();
      // 初始化一个空数组来存储年份对象
      let yearsArray = [];
      // 循环20次，从当前年份向前推20年
      for (let i = 0; i < 20; i++) {
        // 计算年份
        const year = currentYear - i;
        // 创建一个对象，并添加到数组中
        yearsArray.push({
          "label": `${year}年`,
          "value": `${year}年`
        });
      }
      return yearsArray;
    }

    return {
      visible: false,
      // 弹出层默认宽度
      dialogWidth: 0,
      baseURI: process.env.VUE_APP_BASE_API,
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      formData: {
        type: 2,
        wangwangNum: undefined,
        link: undefined,
        handPrice: undefined,
        sellingPrice: undefined,
        counterfeitYear: undefined,
        counterfeitScore: undefined,
        reputationLevel: undefined,
        mainCategory: undefined,
        establishmentTime: undefined,
        shopName: undefined,
        shopDetails: undefined,
        mobile: '',
        qqNum: undefined,
        shopAddress: undefined,
        shopLabel: undefined,
        taobaoReputation: undefined,
        sellerName: undefined,
        localArea: undefined,
        operatingState: undefined,
        shopSource: undefined,
        favorableRate: undefined,
        shopType: undefined,
        transferOrNot: undefined,
        priceDifference: 2,
        discountAmount: undefined,
        shopPicture: null,
      },
      shopPictureAction: process.env.VUE_APP_BASE_API + '/onlineShop/shopPicture/uploadShopPictures',
      shopPictureFileList: [],
      establishmentTimeOptions: getYearsArray(),
      shopTypeOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
    }
  },
  computed: {},
  watch: {},
  created() {

  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.setDialogWidth()
      })()
    }
  },
  methods: {
    /** dialog自适应宽度 */
    setDialogWidth() {
      var clientWidth = document.body.clientWidth
      const defWidth = 800 // 默认宽度
      if (clientWidth < defWidth) {
        this.dialogWidth = '100%'
      } else {
        this.dialogWidth = defWidth + 'px'
      }
    },
    openShow() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },

    shopPictureChange(data){
      console.log(data)
      this.dataForm.shopPicture = data;
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        updateTrading(this.dataForm).then(res => {
          if(res.code == 200){
            this.$alert('保存成功', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                // 处理保存按钮可以继续操作
                this.visible = false
                this.$emit('updateDataList')
              }
            })
          }else{
            // 处理保存按钮可以继续操作
          }
        }).catch(res => {
          // 处理保存按钮可以继续操作
        })
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    shopPictureBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      let isAccept = new RegExp('image/*').test(file.type)
      if (!isAccept) {
        this.$message.error('应该选择image/*类型的文件')
      }
      return isRightSize && isAccept
    },
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
.right-aligned-dialog {
  margin-left: auto; /* 将对话框向右对齐 */
  margin-right: 0; /* 可根据需要调整距离 */
  top: -70px;

}
</style>
<style scoped>
.right-popup {
  position: fixed;
  top: 0;
  right: 0;
  width: 1200px; /* 根据需要调整宽度 */
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto; /* 如果内容太多，可以滚动 */
  z-index: 1000; /* 确保弹出层在上面 */
}

/* 动画效果 */
.slide-right-enter-active, .slide-right-leave-active {
  transition: transform 0.3s;
}
.slide-right-enter, .slide-right-leave-to /* .slide-fade-leave-active 在 <2.1.8 版本中 */ {
  transform: translateX(100%);
}
</style>

